<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>活动</title>
</head>
<body>
	<?php 
   require_once ".\system\dbConn.php";
   require_once('head.php');
        $sql="select * from activity";
		//若果点击了搜索提交按钮，sql语句要改变
		
		if (isset($_GET["key"])) {
			$key=trim($_GET["key"]);
			$sql="select * from activity where aname like '%{$key}%' ";
		}

		$result=mysqli_query($link,$sql);
//结果集
		$num=mysqli_num_rows($result);
		$rowprepage=10;//每页条数
		if (!isset($_GET["page"])) {
			$page=1;
		}else{
			$page=$_GET["page"];
		}
		if ($num%$rowprepage==0) {
			$totalpages=$num/$rowprepage;//总共多少页
		}else{
			$totalpages=ceil($num/$rowprepage);
		}
		$start=($page-1)*$rowprepage;//每页起始编号
		
		$sql0 = "select * from activity limit $start,$rowprepage ";
		$result0=mysqli_query($link,$sql0);
//每页结果集

		if ($num==0) {
			echo "没有找到符合条件的任务";
			exit;
		}
    ?>
	<div style="width: 75%;margin:20px auto; opacity:0.9;">
	<?php
		$index=0;
		while ($row=mysqli_fetch_assoc($result0)) {	
		?>
		<div class="card-hidden" id="card-hidden-<?php echo $index;?>" style="margin-top:70px;margin-bottom:10px;background: #ffffff;border-radius:20px;box-shadow:10px 10px 5px #C7C7C7;border-radius:20px;">
		 <div class="col-md-12 col-sm-12">
	    	<div class="panel panel-default" >
	    		<br>
			  <div class="panel-heading" align="center" style="margin-top: 15px"><h4><?php echo $row["aname"]; ?></h4></div>
			  <div class="panel-body" >
			    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<?php echo $row["adetial"]; ?>
			  </div>
			  <br>
			  <div style="float: right;"><button type="button" class="btn-more" id="btn-more-<?php echo $index;?>">显示更多</button></div>
			   <br>
			  <div class="panel-footer" align="center"><?php 
							if(isset($_SESSION["username"])){
							$uploadusers=$_SESSION["username"];
					?>
							<a href="doActivity.php?aname=<?php echo $row["aname"] ?>">报名参加</a>
					<?php
					}
					else{
					?>
							<h6 class="intro-text text-center"><a a href="#" data-toggle="modal" data-target="#login3"">登录</a>后报名参加</h6>
					<?php
					}
					?></div>
			  <br>
			</div>
		 </div>
		</div>

		<div class="card-shown" id="card-shown-<?php echo $index;?>" style="margin-top:70px;margin-bottom:10px;background: #ffffff;border-radius:20px;box-shadow:10px 10px 5px #C7C7C7;border-radius:20px;">
		 <div class="col-md-12 col-sm-12">
	    	<div class="panel panel-default" >
	    		<br>
			  <div class="panel-heading" align="center"  style="margin-top: 15px"><h4><?php echo $row["aname"]; ?></h4></div>
			  <div class="panel-body1" >
			    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<?php echo $row["adetial"]; ?>
			  </div>
			   <br>
			  <div class="panel-footer" align="center">
					<?php 
							if(isset($_SESSION["username"])){
							$uploadusers=$_SESSION["username"];
					?>
							<a href="doActivity.php?aname=<?php echo $row["aname"] ?>">报名参加</a>
					<?php
					}
					else{
					?>
							<h6 class="intro-text text-center"><a a href="#" data-toggle="modal" data-target="#login3">登录</a>后报名参加</h6>
					<?php
					}
					?>		
			  </div>
			  <br>
			</div>
		 </div>
		</div>

		<?php
		$index=$index+1;
		}
		
		?>
		<nav style="text-align: center ;margin-left: 500px">
			<ul class="pagination"  >
				<?php
				// echo "<li>共有".$num."条记录,共分了".$totalpages."页"."&nbsp;</li>";
				echo "<li class=\"page-item\"><a class=\"page-link\" href=\"?page=1\">首页</a></li>";
				if ($page > 1) {
					echo "<li class=\"page-item\"><a class=\"page-link\" href=\"?page=".($page-1)."\">上页</a></li>";
				}
				
				//第i页的超链接
				for ($i=1; $i<=$totalpages; $i++){ 
					echo "<li class=\"page-item\"><a class=\"page-link\" href=\"?page=$i\">$i</a></li>";
				}
				//尾页下一页
				if ($page < $totalpages) {
					echo "<li class=\"page-item\"><a class=\"page-link\" href=\"?page=".($page+1)."\">下页</a></li>";
				}
				echo "<li class=\"page-item\"><a class=\"page-link\" href=\"?page=$totalpages\">尾页</a></li>";
				?>
			</ul>
		</nav>	
	</div>
</div>

<div class="modal fade" id="login3" tabindex="-1" role="dialog" aria-labelledby="login3" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
	  <div class="modal-content">
	    <div class="modal-header">
				<h5 class="modal-title" id="login">登录</h5>
	      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>		        
	    </div>
	    <div class="modal-body">
			<form class="form-horizontal" id="loginForm" action="doUserLog.php" method="post">
			  <div class="form-group">
			    <!-- <label for="inputUsername" class="col-md-4 control-label">用户名：</label> -->
			    <div class="col-md-12">
			      <input type="text" class="form-control" id="inputUsername" name="username" placeholder="用户名">
			    </div>
			  </div>
			  <div class="form-group">
			    <!-- <label for="inputPassword3" class="col-md-4 control-label">密码：</label> -->
			    <div class="col-md-12">
			      <input type="password" class="form-control" id="inputPassword3" name="password" placeholder="密码">
			    </div>
			  </div>
			  <div class="form-group">
			    <div class="col-sm-offset-2 col-sm-10">
			      <button id="loginBtn" type="submit" class="btn btn-default">登录</button>
			    </div>
			  </div>
			</form>
	    </div>
	  </div>
	</div>
</div>
	
</body>
<style >
body{
	 	 background:#ffffff url(./assets/background.png);
	 	 background-size:100%;
	 }
 .panel-body{
        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }
</style>
<script>
$(document).ready(function(e) {
		$(".card-hidden").show().addClass("show");
             // 执行隐藏
    $(".card-shown").hide().removeClass("show");
    $("button[id^='btn-more-']").click(function(e) {
				const index = e.target.id.replace("btn-more-","");
        if( $("#card-hidden-"+index).hasClass("show") ){
            // 执行隐藏
            $("#card-hidden-"+index).hide().removeClass("show");
            //显示
            $("#card-shown-"+index).show().addClass("show");
            // 其他
        }else{
            // 显示
            $("#card-hidden-"+index).show().addClass("show");
             // 执行隐藏
             $("#card-shown-"+index).hide().removeClass("show");
        }
    });
});

</script>
</html>